<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { axiosrmedical } from '../../http/axiosRead';

const route = useRoute();
const router = useRouter();

const loading = ref(false);
const detail = ref<any>(null);

const fetchDetail = async () => {
  loading.value = true;
  try {
    const paymentId = route.query.paymentId;
    if (!paymentId) {
      return;
    }
    const response = await axiosrmedical.get('/Payment/GetPaymentDetail', {
      headers: { 'axiosrmedical': true },
      params: { paymentId }
    });
    if (response.data.code === 200) {
      detail.value = response.data.data;
    }
  } finally {
    loading.value = false;
  }
};

onMounted(fetchDetail);

const formatAmount = (amount: number) => amount ? amount.toFixed(2) : '0.00';
const maskIdCard = (idCard: string) => idCard ? idCard.replace(/(\d{3})\d{8,12}(\d{4})/, '$1********$2') : '';
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const d = new Date(dateStr);
  return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
};
</script>

<template>
  <div class="success-detail-page">
    <van-nav-bar title="缴费详情" left-arrow @click-left="router.back()" />
    <div class="success-icon-box">
      <van-icon name="passed" size="60" color="#1989fa" />
      <div class="success-title">缴费成功</div>
    </div>
    <div v-if="detail" class="main-content">
      <div class="info-card">
        <div class="info-row"><span>费用类型</span><span>{{ detail.itemName }}</span></div>
        <div class="info-row"><span>就诊科室</span><span>{{ detail.departmentName }}</span></div>
        <div class="info-row"><span>医生姓名</span><span>{{ detail.doctorName }}</span></div>
        <div class="info-row"><span>就诊人</span><span>{{ detail.patientName }}</span></div>
        <div class="info-row"><span>就诊卡号</span><span>{{ maskIdCard(detail.idCard) }}</span></div>
      </div>
      <div class="detail-card">
        <div class="card-title">费用明细</div>
        <div v-for="(item, idx) in detail.itemDetails" :key="idx" class="fee-item">
          <div class="fee-item-main">
            <span>{{ item.name }}</span>
            <span>¥{{ formatAmount(item.amount) }}</span>
          </div>
          <div class="fee-item-sub">单价: ¥{{ formatAmount(item.unitPrice) }} 数量: {{ item.quantity }}</div>
        </div>
      </div>
      <div class="other-card">
        <div class="other-row"><span>支付方式</span><span>{{ detail.paymentMethod }}</span></div>
        <div class="other-row"><span>卡内余额</span><span>{{ formatAmount(detail.cardBalance) }}元</span></div>
        <div class="other-row"><span>订单总额</span><span class="red">{{ formatAmount(detail.totalAmount) }}元</span></div>
        <div class="other-row"><span>订单编号</span><span>{{ detail.orderNo }}</span></div>
        <div class="other-row"><span>订单时间</span><span>{{ formatDate(detail.createTime) }}</span></div>
        <div class="other-row"><span>订单状态</span><span>{{ detail.isPaid ? '已支付' : '未支付' }}</span></div>
      </div>
    </div>
    <van-loading v-else-if="loading" vertical>加载中...</van-loading>
  </div>
</template>

<style scoped>
.success-detail-page {
  min-height: 100vh;
  background: #f5f7fa;
}
.success-icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px 0 16px 0;
}
.success-title {
  font-size: 20px;
  color: #1989fa;
  margin-top: 12px;
  font-weight: 600;
}
.main-content {
  padding: 0 16px;
}
.info-card, .detail-card, .other-card {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 16px;
}
.info-row, .other-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
}
.info-row:last-child, .other-row:last-child {
  margin-bottom: 0;
}
.card-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.fee-item {
  margin-bottom: 10px;
}
.fee-item-main {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: #333;
}
.fee-item-sub {
  font-size: 13px;
  color: #999;
  margin-top: 2px;
}
.red {
  color: #ff4d4f;
  font-weight: 500;
}
</style> 